MY Digital Canvas

Pure Petals Skin Care Product App

The Pure Petals Skin Care Product App offers users an elegant and intuitive platform for purchasing skincare products. The high-fidelity UI design incorporates various principles and techniques to enhance user experience. Mainly focusing on the colors 6B240C and FFE4E2, with additional sub-colors, the design exudes sophistication and elegance. Two types of fonts are predominantly used to maintain consistency and readability throughout the interface. The use of 2D vector animations adds a touch of dynamism and engagement to the design.

Key Interfaces

Splash Screen

  • Welcomes users with an elegant introduction to the Pure Petals brand.
  • Features a "Get Started" button to initiate user interaction.

Home

  • Horizontally scroll intuitive navigation elements for easy access to product categories.
  • Displays Our Best Products in an aesthetically pleasing grid layout.
  • Includes search and notification buttons for enhanced user interaction.
  • Clicking the search button navigates users to the search interface.

Favorite Products

  • Displays user's favorite products in an aesthetically pleasing grid layout.
  • Provides easy access to liked products for enhanced user convenience.

Product Details

  • Displays comprehensive product details, including description, ratings, and reviews.
  • Includes a "like" button for adding or removing items from the favorites list.
  • Features an "Add to Cart" button for convenient shopping.

Cart

  • Displays all items added to the cart for easy review and adjustment.
  • Options for adjusting quantities and removing items from the cart.
  • Users can search for items within the cart using the search button.
  • Subtotal, delivery fee, and total are clearly displayed for user review.
  • Checkout button for proceeding to the payment process.

Checkout

  • Users can input shipping address and add new addresses if needed.
  • Option to select payment method and add new payment methods.
  • Clearly displays the total payable amount before proceeding to payment.
  • "Pay Now" button for secure and efficient checkout process.

Search

  • Allows users to search for products.
  • Displays recently searched products for quick access.
  • Highlights new products to keep users informed about the latest offerings.

UI Techniques

  1. Horizontal scrolling navigation elements
  2. Aesthetically pleasing grid layouts
  3. 2D vector animations for dynamic interface
  4. Consistent use of main and sub colors for visual appeal
  5. Two types of fonts for readability and consistency

Skills Demonstrated

  1. UI/UX Design Principles
  2. Color Theory and Palette Selection
  3. 3D Vector Animations
  4. Typography and Font Pairing
  5. Intuitive Navigation and User Flow Optimization

This high-fidelity UI design for Pure Petals Skin Care Product App aims to provide users with a seamless and enjoyable shopping experience, incorporating visually appealing layouts, intuitive navigation, and user-friendly features.

Figma Prototype Link